<!--注册 页面-->
<template>

  <div id="register">

    <el-row>
      <el-col :span="20" :offset="12">
        <el-form :model="vipVoucher" status-icon  label-width="100px" class="demo-ruleForm">


          <el-form-item label="卷码" prop="code" >
            <el-input v-model="vipVoucher.id" ></el-input>
          </el-form-item>


          <el-form-item label="vip级别" prop="mail">
            <el-input placeholder="选择级别" v-model="select" class="input-with-select" :disabled="true">
              <el-select v-model="select" slot="prepend" placeholder="请选择">
                <el-option v-for="(item,index) in levels" :key="item.id" :value="item.id">{{item.level}}</el-option>
              </el-select>
            </el-input>
          </el-form-item>

          <el-form-item label="数量" prop="mail">
            <el-input placeholder="生成数量 " type="number" v-model="number" :disabled="numberFlag">
            </el-input>
          </el-form-item>

          <el-form-item>
            <el-button type="danger" @click="submitForm('ruleForm')" v-if="addFlag">添加</el-button>
            <el-button type="primary" @click="submitForm('ruleForm')" v-if="saveFlag">保存</el-button>
            <el-button type="" @click="resetForm('ruleForm')" >返回</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
  </div>

</template>
<script>

  import {UploadParam} from "../../../constant/UploadParam";
  import {Handle} from "../../../constant/Handle";
  import {ResultStatus} from "../../../constant/ResultStatus";
  import {StringUtil} from "../../../../utils/StringUtil";
  import {ContentType} from "../../../constant/ContentType";
  import {BasePageReq} from "../../req/BasePageReq";


  export default {
    data() {

      return {
        uploadParam: UploadParam,
        handle:this.$route.query.handle,
        id:this.$route.query.id,
        vipVoucher:{
          voucher:'',
          levelId:'',
          handle:'',
          id:'',

        },
        addFlag:true,
        saveFlag:true,
        select: '',//下拉栏
        levels:[],
        number:1,//生成数量
        numberFlag:false,
      };
    },
    methods: {
      submitForm:async function(formName) {
        if(this.number<1){
          this.number=1;
        }
        if(this.handle == Handle.ADD){
          if(StringUtil.checkNull(this.select)){
            this.$notify(StringUtil.warning("请选择VIP级别"))
            return ;
          }

        }
        for(let i = 0;i<this.number;i++) {
          this.vipVoucher.voucher = StringUtil.uuid();
          this.vipVoucher.handle = this.handle;
          this.vipVoucher.levelId = this.select;
          this.$axios({
            method: 'post',
            url: 'vip/voucher/save',
            data: JSON.stringify(this.vipVoucher),
            datatype: 'json',
            headers: {
              'content-type': 'application/json;charset=UTF-8'
            },
          }).then((response) => {

            let datas = response.data;
            if (datas.code == ResultStatus.SUCCESS) {
              this.$notify(StringUtil.success(datas.msg));
              this.$router.push({name: 'vipVoucher'})

            } else {
              this.$notify(StringUtil.warning(datas.msg));
              return;
            }

          }).catch(function (error) {
            console.log(error)
            alert(error.data.msg);
            return false;
          });
        }

      },
      resetForm(formName) {
        this.$router.push({name:'vipVoucher'})
      },




      /**
       * 查看用户
       */
      getUser(){
        this.vipVoucher.handle = Handle.QUERY;
        this.vipVoucher.id = this.id;

        this.$axios
          .post('/vip/voucher/save',
            this.vipVoucher, //转成json
            ContentType.APPLICATION_JSON,
          )
          .then((response) => {

            let datas = response.data;
            if (datas.code != ResultStatus.SUCCESS) {
              this.$notify(StringUtil.warning(datas.msg));
              return;
            }
            this.vipVoucher = datas.data;
            this.select = this.vipVoucher.levelId;



          })
          .catch((error) => {
            console.log(error);
            let datas = error.data;
            this.$notify(StringUtil.warning(datas.msg));
          })
      },
      initComponent(){
        switch (this.handle) {
          case Handle.ADD:
            this.saveFlag = false;
            break;
          case Handle.UPDATE:
            this.addFlag = false;
            this.numberFlag = true;
            break;
          default:
            break;
        }
      },
      levelPageQuery(){
        let basePageReq = new BasePageReq();
        basePageReq.size = 100;
        basePageReq.page = 1;
        this.$axios
          .post('/vip/level/queryPage',
            basePageReq, //转成json
            ContentType.APPLICATION_JSON,
          )
          .then((response)=>{

            let datas = response.data;
            if(datas.code != ResultStatus.SUCCESS){
              this.$notify(StringUtil.warning(datas.msg));
              return;
            }
            let datas2 = datas.data;
            this.levels = datas2.list;
          })
          .catch((error)=>{
            console.log(error);
            let datas = error.data;
            this.$notify(StringUtil.warning(datas.msg));
          })
      },


    }

    ,
    components:{

    },
    mounted : async function() {
      this.getUser();
      this.initComponent();
      this.levelPageQuery();


    }
  }
</script>

<style>
  #register{
    width: 50%  }
  .el-select .el-input {
    width: 130px;
  }
  .input-with-select .el-input-group__prepend {
    background-color: #fff;
  }
</style>
